<template>
	<page-meta :page-style="gradientStyle"></page-meta>
	<view class="page-container">
		<view class="page-body">
			<!-- 导航栏 -->
			<view class="navbar-box" :style="{height: navBarHeight + 'rpx', background: navbarInfo.bgColor}">
				<view class="content">
					<view class="left-icon" :style="{top: menuTop + 'rpx'}" @click="navBackHandle">
						<i class="iconfont icon-back"></i>
					</view>
					<view class="title" :style="{top: menuTop + 'rpx'}">
						<text>电磁力</text>
					</view>
				</view>
			</view>
			<view :style="{height: navBarHeight + 'rpx'}"></view>
			<!-- 提示框 -->
			<view class="tips-box" v-if="tipsBar">
				<view class="content">
					<view class="left-box">
						<i class="iconfont icon-notice-fill"></i>
						<text>电磁力较上周提高了34分，冲冲冲！</text>
					</view>
					<view class="right-box" @click="tipsBar = !tipsBar">
						<i class="iconfont icon-close"></i>
					</view>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="level-box">
				<view class="avatar">
					<image :src="imageUrl.avatar" mode="aspectFill"></image>
					<text>一叶志远</text>
				</view>
				<view class="footer-tips">
					<text>每周一18-19点间更新</text>
				</view>
				<swiper class="swiper" @change="changeSwiper" duration="600" :current="swiperIndex"
					previous-margin="70rpx" next-margin="70rpx">
					<block v-for="(item, index) in swiperList" :key="index">
						<swiper-item class="swiper-item">
							<view class="item-box" :class="{active: index === swiperIndex}"
								:style="{background: swiperBgColor}">
								<view class="content" :style="{color: item.style.colorB}">
									<view class="title">
										<text>{{item.level}}</text>
										<text>信用分：100分</text>
										<text class="iconfont icon-arrow-right"></text>
									</view>
									<view class="tips" v-if="item.lock">
										<text>电磁力达{{item.score}}可解锁</text>
									</view>
									<view class="status" v-else>
										<view class="progress">
											<view class="active" :style="{background: item.style.colorB, width: '66%'}">
												60%</view>
										</view>
										<view class="score">
											<text>电磁力分：</text>
											<text>{{item.progress}}/100</text>
										</view>
									</view>
								</view>
								<view class="lock-box" v-if="item.lock">
									<i class="iconfont icon-lock-fill"></i>
									<text>待解锁</text>
								</view>
								<view class="image-box">
									<image class="image" :src="item.roleIcon" mode="aspectFit"></image>
								</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="translate-box">
					<view class="box-line" :style="{transform: 'translateX('+offset + 'px);'}">
						<block v-for="(item, index) in swiperList" :key="index">
							<image class="item-box" :class="[swiperIndex === index ? 'active' : '']" :id="'id-'+index"
								@click="changeTab(index)" :src="item.levelIcon" mode="aspectFill"></image>
							<view class="item-line" v-if="index < swiperList.length - 1"></view>
						</block>
					</view>
				</view>
			</view>
			<!-- 等级权益grid -->
			<view class="grid-box">
				<view class="content">
					<view class="header">
						<view class="left">
							<text>Lv.{{swiperIndex + 1}} 等级可解锁权益</text>
						</view>
						<view class="right" @click="wrapViewHandle">
							<text>{{!wrapInfo.isOpen ? '查看全部权益' : '收起'}}</text>
							<i class="iconfont icon-arrow-down" :class="[wrapInfo.isOpen ? 'active' : '']"></i>
						</view>
					</view>
					<view class="row">
						<block v-for="(item, index) in gridList" :key="index">
							<view class="col" :class="[swiperIndex + 1 >= item.lv ? 'active' : '']">
								<i class="iconfont" :class="item.icon"></i>
								<text>{{item.name}}</text>
							</view>
						</block>
					</view>
				</view>
			</view>
			<!-- 用户列表 -->
			<view class="user-box" :style="{marginTop: wrapInfo.marginTop + 'rpx'}">
				<view class="content">
					<view class="header">
						<view class="left">
							<text>进步之星</text>
						</view>
						<view class="right">
							<text>查看更多</text>
							<i class="iconfont icon-arrow-right"></i>
						</view>
					</view>
					<block v-for="(item, index) in starIDList" :key="index">
						<view class="user-card border-bottom">
							<view class="left">
								<image :src="item.avatar" mode="aspectFill"></image>
								<view class="detail">
									<view class="name">
										{{item.name}}
									</view>
									<view class="level">
										电磁力：Lv{{item.lv}}・擅长：{{item.area}}
									</view>
									<view class="tips">
										<view class="active">
											{{item.minActive}}+周互动
										</view>
										<view class="fans">
											{{item.minFans}}+周涨粉
										</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view v-if="!item.follow" class="follow-btn"
									:style="{color: currentColor,borderColor: currentColor}">
									<i class="iconfont icon-add"></i>
									<text>关注</text>
								</view>
								<view v-else class="follow-btn active">
									<text>已关注</text>
								</view>
							</view>
						</view>
					</block>
					<view class="ad-card">
						<view class="header">
							<text>创作学院</text>
						</view>
						<view class="image-box">
							<image class="image" :src="imageUrl.biliAd" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
					level: 'Lv1',
					score: 100,
					lock: false,
					progress: 66,
					levelIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/f81846d2-3b52-4c70-94f2-bb15f30cef13.png',
					roleIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/b1b6c8e7-eb54-4522-874e-8e891e8a039a.png',
					style: {
						colorA: '#20b3bb',
						colorB: '#80ca2d'
					}
				}, {
					level: 'Lv2',
					score: 101,
					lock: true,
					levelIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/96044063-47b2-44e2-a462-f0b10794cd75.png',
					roleIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/d0d8aab3-b160-4523-98a9-cba23b4aa126.png',
					style: {
						colorA: '#09b2c9',
						colorB: '#26c963',
					}
				}, {
					level: 'Lv3',
					score: 201,
					lock: true,
					levelIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/f3f2219d-c2e1-42f0-9b93-658b17a6576e.png',
					roleIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/bdd2713e-6689-425c-b24f-050ca3324014.png',
					style: {
						colorA: '#8981ec',
						colorB: '#16c3be',
					}
				}, {
					level: 'Lv4',
					lock: true,
					score: 301,
					levelIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/3cc8ab2c-9c67-4ef4-aca5-5fd82b49da15.png',
					roleIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/8a46ca3d-00c5-4636-b42b-8d4c55309118.png',
					style: {
						colorA: '#cc68e6',
						colorB: '#6385fc',
					}
				}, {
					level: 'Lv5',
					score: 401,
					lock: true,
					levelIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/fcdba968-8200-4450-81ca-054212319562.png',
					roleIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/3e1b4da9-dcbd-441c-a247-585114a2a148.png',
					style: {
						colorA: '#e15d82',
						colorB: '#ab6ef9',
					}
				}, {
					level: 'Lv6',
					score: 501,
					lock: true,
					levelIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/314eec43-bd17-46ae-888e-b12698046a6c.png',
					roleIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/f2729e47-8271-4f19-9266-9ba01b7d60a5.png',
					style: {
						colorA: '#f35bbd',
						colorB: '#f55d57',
					}
				}, {
					level: 'Lv7',
					score: 601,
					lock: true,
					levelIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/2a9a00da-ab7e-4da4-ba24-5478dd3821b2.png',
					roleIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/187dc21a-7b5c-480f-af91-8be2ef7d4783.png',
					style: {
						colorA: '#ffb810',
						colorB: '#fc8026',
					}
				}, {
					level: 'Lv8',
					score: 701,
					lock: true,
					levelIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/d293de6a-def2-4a2e-b524-774139fe8752.png',
					roleIcon: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/dfc585a1-0691-4a54-a795-29af9084fc94.png',
					style: {
						colorA: '#413066',
						colorB: '#2f323b',
					}
				}],
				gridList: [{
					name: '关闭互动',
					lv: 1,
					icon: 'icon-comment-lock'
				}, {
					name: '评论精选',
					lv: 1,
					icon: 'icon-comment-check'
				}, {
					name: '超大文件',
					lv: 3,
					icon: 'icon-file'
				}, {
					name: '创作激励',
					lv: 3,
					icon: 'icon-money-bag'
				}, {
					name: '稿件预约',
					lv: 4,
					icon: 'icon-news'
				}, {
					name: '版权保护',
					lv: 5,
					icon: 'icon-protect'
				}, {
					name: '联合投稿',
					lv: 5,
					icon: 'icon-friend'
				}, {
					name: '合集',
					lv: 5,
					icon: 'icon-multiple-layers'
				}, {
					name: '花火',
					lv: 5,
					icon: 'icon-diamond'
				}, {
					name: '互动抽奖',
					lv: 7,
					icon: 'icon-gift'
				}],
				starIDList: [{
					lv: 3,
					name: '带感少女陈霹雳',
					avatar: 'https://picsum.photos/100/100?random=1',
					minActive: 1000,
					minFans: 5000,
					area: '日常',
					follow: false
				}, {
					lv: 3,
					name: '三十而已访谈',
					avatar: 'https://picsum.photos/100/100?random=2',
					minActive: '1万',
					minFans: 1000,
					area: '日常',
					follow: true
				}, {
					lv: 3,
					name: '-爵冷-',
					avatar: 'https://picsum.photos/100/100?random=3',
					minActive: 5000,
					minFans: 1000,
					area: '日常',
					follow: false
				}],
				swiperIndex: 0,
				levelIndex: 0,
				offset: (uni.getSystemInfoSync().windowWidth / 2) - 15, // 当前偏移数
				navBarHeight: this.$navBarHeight * 2, // 导航栏高度
				menuTop: this.$menuTop * 2, // 胶囊距离顶部的高度
				tipsBar: true,
				navbarInfo: {
					isBg: false,
					bgColor: 'transparent'
				},
				wrapInfo: {
					isOpen: false,
					marginTop: -140,
				},
				imageUrl: {
					avatar: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/e4630474-1bab-4ca6-b81d-996c2a10733e.png',
					biliAd: 'https://mp-e93e0c5f-05cf-4713-9d34-a6449768f5b0.cdn.bspapp.com/cloudstorage/ae3ddb00-3ccb-4647-bbe6-c81dd8e9c055.jpg'
				}
			}
		},
		computed: {
			/* 页面渐变色 */
			gradientStyle() {
				return `background:linear-gradient(360deg, 
				${this.swiperList[this.swiperIndex].style.colorA} 0%, 
				${this.swiperList[this.swiperIndex].style.colorB} 100%);background-attachment:fixed;`
			},
			/* 轮播卡片渐变色 */
			swiperBgColor() {
				return `linear-gradient(90deg,
				#fefdfd -30%,
				${this.swiperList[this.swiperIndex].style.colorB} 150%);`
			},
			/* 当前页面颜色 */
			currentColor() {
				return this.swiperList[this.swiperIndex].style.colorB
			}
		},
		onPageScroll(e) {
			if (3 < e.scrollTop < 4) {
				this.navbarInfo.bgColor = this.currentColor;
				this.navbarInfo.isBg = true;
			}
			if (e.scrollTop < 2) {
				this.navbarInfo.bgColor = 'transparent';
				this.navbarInfo.isBg = false;
			}
		},
		methods: {
			/* 改变swiper时触发 */
			changeSwiper(e) {
				this.swiperIndex = e.detail.current;
				this.changeTab(e.detail.current);
			},
			/* 点击line-tab时触发 */
			changeTab(index) {
				const initOffset = (uni.getSystemInfoSync().windowWidth / 2) - 15; // 偏移基数
				const query = uni.createSelectorQuery();
				query.select('#id-' + index).boundingClientRect(res => {
					if (index > this.levelIndex) {
						this.offset = this.offset - (res.left - initOffset);
					}
					if (index < this.levelIndex) {
						this.offset = this.offset + (initOffset - res.left);
					}
					this.levelIndex = index;
					this.swiperIndex = index;
					if (this.navbarInfo.isBg) {
						this.navbarInfo.bgColor = this.currentColor;
					} else {
						this.navbarInfo.bgColor = 'transparent';
					}
				}).exec();
			},
			/* 展开过度动画 */
			wrapViewHandle() {
				this.wrapInfo.isOpen = !this.wrapInfo.isOpen;
				if (this.wrapInfo.isOpen) {
					this.wrapInfo.marginTop = 0
				} else {
					this.wrapInfo.marginTop = -140
				}
			},
			/* 页面返回 */
			navBackHandle() {
				uni.navigateBack({
					delta: 0
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$color-text: #fff;

	.page-container {
		.page-body {

			.navbar-box {
				position: fixed;
				width: 100%;
				z-index: 1000;

				.content {
					position: relative;
					color: $color-text;

					.left-icon {
						position: absolute;
						left: 30rpx;
						width: 64rpx;
						height: 64rpx;
						display: flex;
						align-items: center;

						i {
							font-size: 40rpx;
						}
					}

					.title {
						font-size: 36rpx;
						position: absolute;
						left: 50%;
						transform: translate(-50%, 0);
						height: 64rpx;
						line-height: 64rpx;
					}
				}
			}

			.tips-box {
				background: rgba(255, 255, 255, .1);
				border-radius: 999px;
				margin: 40rpx;
				padding: 15rpx 30rpx;
				font-size: 28rpx;
				color: #fff;

				.content {
					display: flex;
					align-items: center;
					color: $color-text;

					.left-box {
						flex: 1;
						display: flex;
						align-items: center;

						i {
							margin-right: 20rpx;
						}
					}

					.right-box {
						display: flex;
						align-items: center;

						i {
							font-size: 36rpx;
						}
					}
				}
			}

			.level-box {
				position: relative;
				z-index: 1;

				.avatar {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: bold;
					color: $color-text;
					position: absolute;
					left: 70rpx;
					top: 0;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				.footer-tips {
					color: rgba(255, 255, 255, .7);
					font-size: 20rpx;
					position: absolute;
					left: 50%;
					bottom: 12%;
					transform: translate(-50%, 0);
					z-index: 800;
					font-weight: bold;
				}

				.swiper {
					height: 500rpx;
					pointer-events: none;

					.swiper-item {
						display: flex;
						align-items: center;
						overflow: initial;

						.item-box {
							width: 100%;
							height: 260rpx;
							border-radius: 30rpx;
							margin: 0 15rpx;
							transition: all 0.4s ease-in 0s;
							pointer-events: auto;

							.image-box {
								.image {
									width: 100vw;
									height: 100%;
									position: absolute;
									right: -40%;
									top: 50%;
									z-index: 300;
									transform: translate(0, -50%);
									pointer-events: none;
								}
							}

							.content {
								padding: 30rpx 40rpx;
								position: absolute;
								z-index: 500;

								.title {
									font-size: 20rpx;

									& text:nth-child(1) {
										font-size: 100rpx;
										font-weight: bold;
										font-style: italic;
										margin-right: 20rpx;
									}

									.icon-arrow-right {
										font-size: 18rpx;
										font-weight: bold;
									}
								}

								.tips {
									font-size: 24rpx;
								}

								.status {
									.progress {
										background-color: rgba(255, 255, 255, .7);
										height: 16rpx;
										border-radius: 999px;
										overflow: hidden;

										.active {
											height: inherit;
										}
									}

									.score {
										padding-top: 15rpx;

										& text:nth-child(1) {
											font-size: 24rpx;
										}

										& text:nth-child(2) {
											font-size: 36rpx;
											font-style: italic;
											font-weight: bold;
										}
									}
								}
							}

							.lock-box {
								display: inline-flex;
								background: rgba(255, 255, 255, .7);
								border-radius: 999px;
								font-size: 24rpx;
								padding: 10rpx 20rpx;
								position: absolute;
								right: 10%;
								bottom: 40%;
								z-index: 1000;

								i {
									margin-right: 5rpx;
								}
							}
						}

						.item-box.active {
							height: 280rpx;
						}
					}
				}

				.translate-box {
					display: flex;
					padding: 20rpx 0;
					position: absolute;
					bottom: -35rpx;
					left: 0;
					z-index: -1;

					.box-line {
						display: flex;
						transition: all 0.5s ease-out;
						align-items: center;

						.item-box {
							width: 60rpx;
							height: 60rpx;
							opacity: .5;
						}

						.item-box.active {
							opacity: 1;
						}

						.item-line {
							width: 180rpx;
							height: 2rpx;
							background-color: #dff3df;
							border-radius: 999px;
							opacity: 0.5;
							margin: 0 20rpx;
						}
					}
				}
			}

			.grid-box {
				.content {
					color: $color-text;

					.header {
						display: flex;
						align-items: center;
						padding: 30rpx;
						font-size: 32rpx;
						.left,
						.right {
							flex: 1;
						}

						.right {
							font-size: 28rpx;
							display: flex;
							justify-content: flex-end;
							align-items: center;

							.icon-arrow-down {
								font-size: 24rpx;
								margin-left: 10rpx;
								transition: all 0.3s ease-out;
							}

							.icon-arrow-down.active {
								transform: rotate(180deg);
								transition: all 0.3s ease-out;
							}
						}
					}

					.row {
						display: flex;
						flex-wrap: wrap;
						font-size: 24rpx;

						.col {
							padding: 20rpx 0;
							flex: 0 0 25%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							opacity: .5;

							i {
								font-size: 64rpx;
								padding-bottom: 20rpx;
							}
						}

						.col.active {
							opacity: 1;
						}
					}
				}
			}

			.user-box {
				background-color: #fff;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				transition: all 0.3s ease-out;
				width: 100%;
				position: absolute;
				z-index: 100;
				.content {
					.header {
						display: flex;
						padding: 40rpx;

						.left,
						.right {
							flex: 1;
						}

						.left {
							font-weight: bold;
							font-size: 32rpx;
						}

						.right {
							display: flex;
							font-size: 24rpx;
							color: #999999;
							align-items: center;
							justify-content: flex-end;

							i {
								font-size: 20rpx;
								font-weight: bold;
								padding-left: 10rpx;
							}
						}
					}

					.user-card {
						position: relative;
						display: flex;
						align-items: center;
						padding: 30rpx;

						.left {
							flex: 1;
							display: flex;
							align-items: center;

							image {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								vertical-align: middle;
								margin-right: 20rpx;
							}

							.name {
								font-size: 28rpx;
							}

							.level {
								font-size: 24rpx;
								margin: 15rpx 0;
								color: #888888;
							}

							.tips {
								display: flex;
								font-size: 20rpx;

								view {
									background-color: #fff0e3;
									color: #fa8e57;
									padding: 0 10rpx;
									border-radius: 5rpx;
									margin-right: 20rpx;
								}
							}
						}

						.right {
							.follow-btn {
								border-radius: 999px;
								font-size: 24rpx;
								padding: 10rpx 20rpx;
								display: flex;
								align-items: center;
								border: 1rpx solid;
								min-width: 120rpx;
								justify-content: center;

								i {
									font-size: 20rpx;
									padding-right: 10rpx;
									font-weight: bold;
								}
							}

							.follow-btn.active {
								border: none;
								color: #999999;
								background-color: rgba(0, 0, 0, .1);
							}
						}
					}

					.ad-card {
						padding-bottom: 100rpx;

						.header {
							font-weight: bold;
							font-size: 32rpx;
						}

						.image-box {
							padding: 0 30rpx;

							.image {
								width: 100%;
								height: 200rpx;
								border-radius: 20rpx;
								vertical-align: middle;
							}
						}
					}
				}
			}
		}
	}
</style>
